<template>
 <div class="content">
	 
	<div class="top_box">
		<div class="top_tit">您已完成阅读广度测试</div>
		<div class="count_box">
			<div class="count_box_img">
				<img src="@/assets/image/fraction/0start.png" alt="">
			</div>
			<div class="count_box_num">
				94<span>分</span>
			</div>
		</div>
	</div>
	<div class="bottom_box">
		<div class="bottom_left">
			<div class="bottom_left_tit">阅读广度-测试明细</div>
			<div class="bottom_left_heng"></div>
			<div class="bottom_left_item" v-for="v in 3">
				<img src="../../assets/image/fraction/time.png" alt="">
				<div>测试时长  09:12</div>
			</div>
			<div class="bottom_left_button_box">
				<div>错题回顾</div>
				<div>重新测试</div>
			</div>
		</div>
		<div  class="bottom_right">
			<div class="real_right_box">
				<div class="right_item" v-for="v in 3">
					<div class="right_item_tit">题组{{v}}</div>
					<div class="right_item_object" >
						<div v-for="v in 30">
							<div class="right_object" v-if="v%2==0">{{v}}</div>
							<div class="wrong_object" v-if="v%2!=0">{{v}}</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
   data() {
 	return {

 	}
 },
		mounted(){


		},
		beforeDestroy() {


		},
		 methods:{

		 },


		 watch: {

		 }
	}
</script>
<style lang="less" scoped>
.top_box{
	
	height: 3.21rem;
	width: 100%;
	background-image: url(../../assets/image/fraction/topbg.png);
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100%;
	position: relative;
	margin-bottom: 1.04rem;
	.count_box{
		width: 1.78rem;
		height: 2.27rem;
		position: absolute;
		top: 1.87rem;
		left: 50%;
		transform: translateX(-50%);
		.count_box_img{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			&>img{
				width: 100%;
				height: 100%;
			}
		}
		.count_box_num{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;
			padding-bottom: 0.62rem;
			text-align: center;
			font-size: 0.56rem;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #363636;
			line-height: 0.38rem;
			text-shadow: 0 0.04rem 0.01rem rgba(255, 178, 178, 0.61);
			background: linear-gradient(0deg, #FF6C4F 0%, #FF3333 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			&>span{
				font-size: 0.19rem;
				padding-top: 0.1rem;
				box-sizing: border-box;
				display: block;
			}
		}
	}
	.top_tit{
		text-align: center;
		font-size: 0.24rem;
		padding-top: 0.99rem;
	}
}
.bottom_box{
	padding-left: 2.83rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	.bottom_left{
		margin-right: 0.77rem;
		.bottom_left_tit{
			font-size: 0.24rem;
			color: #444444;
			font-weight: 400;
		}
		.bottom_left_heng{
			width: 4.47rem;
			height: 0.01rem;
			background: #DCDCDC;
			margin: 0.16rem 0 0.27rem;
		}
		.bottom_left_item{
			display: flex;
			align-items: center;
			margin-bottom: 0.21rem;
			&>img{
				width: 0.23rem;
				height: 0.23rem;
				margin-right: 0.19rem;
			}
			&>div{
				font-size: 0.16rem;
				color: #565656;
			}
		}
		.bottom_left_button_box{
			margin-top: 1.50rem;
			display: flex;
			align-items: center;
			
			&>div{
				width: 1.56rem;
				height: 0.54rem;
				font-size: 0.18rem;
				line-height: 0.54rem;
				border-radius: 0.27rem;
				box-sizing: border-box;
				text-align: center;
			}
			&>div:nth-child(1){
				background: #FFA523;
				color: white;
				margin-right: 0.33rem;
			}
			&>div:nth-child(2){
				border: 0.02rem solid #7F91DC;
				color: #7F91DC;
			}
		}
	}
	.bottom_right{
		width: 7.73rem;
		height: 4.08rem;
		background: #FFFFFF;
		box-shadow: 0px 0.06rem 0.12rem 0px rgba(231, 231, 231, 0.29);
		border-radius: 0.1rem;
		overflow-y: scroll;
		box-sizing: border-box;
		.real_right_box{
			width: 100%;
			height: auto;
			padding: 0 0.55rem 0 0.57rem;
			.right_item{
				padding: 0.36rem 0;
				border-bottom: 0.01rem solid #EDEDED;
				box-sizing: border-box;
				display: flex;
				align-items: flex-start;
				width: 100%;
				.right_item_tit{
					font-size: 0.16rem;
					color: #393939;
					margin-right: 0.42rem;
				}
				.right_item_object{
					width: 80.787%;
					.right_object{
						width: 0.48rem;
						height: 0.48rem;
						background: #7A91DC;
						border: 0.04rem solid #B3C5FF;
						border-radius: 50%;
						box-sizing: border-box;
						line-height: 0.41rem;
						text-align: center;
						font-size: 0.21rem;
						color: white;
						float: left;
						margin-right: 0.22rem;
						margin-bottom: 0.22rem;
					}
					.wrong_object{
						width: 0.48rem;
						height: 0.48rem;
						background: #FFA523;
						border: 0.04rem solid #FFE1B5;
						border-radius: 50%;
						box-sizing: border-box;
						line-height: 0.41rem;
						text-align: center;
						font-size: 0.21rem;
						color: white;
						float: left;
						margin-right: 0.22rem;
						margin-bottom: 0.22rem;
					}
				}
			}
		}
	}
}
</style>